<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()} + '/'">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style type="text/css">
        .htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
        .htmleaf-icon{color: #fff;}
    </style>
</head>
<body>
<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
    授权
</button>-->
<div>
    <!-- Button trigger modal -->
    <!--<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
        授权
    </button>-->

</div>
<table width="100%" border="0" cellspacing="0" cellpadding="6" class="table table-striped table-bordered">
    <tbody>
    <tr>
        <td valign="middle" class="blockTd">
            <img src="img/icon012a6.gif">
            角色信息
            <input type="hidden" id="RelaCatalogID" name="RelaCatalogID" value="0">
        </td>
    </tr>
    <tr>
        <td style="padding: 0 8px 4px;">
            <a href="javascript:void(0);" ztype="zPushBtn" class="zPushBtn" hidefocus="true" tabindex="-1" onselectstart="return false" onclick="add();return false;"><img src="img/icon003a2.gif"><b>新建&nbsp;</b>
            </a>
            <a href="javascript:void(0);" ztype="zPushBtn" class="zPushBtn" hidefocus="true" tabindex="-1" onselectstart="return false" onclick="edit();return false;"><img src="img/icon003a4.gif"><b>修改&nbsp;</b>
            </a>
            <a href="javascript:void(0);" ztype="zPushBtn" class="zPushBtn" hidefocus="true" tabindex="-1" onselectstart="return false" onclick="showPermissionTree()"><img src="img/icon014a8.gif"><b>授权&nbsp;</b>
            </a>
            <a href="javascript:void(0);" ztype="zPushBtn" class="zPushBtn" hidefocus="true" tabindex="-1" onselectstart="return false" onclick="del();return false;"><img src="img/icon003a3.gif"><b>删除&nbsp;</b>
            </a>
            关键词:
            <input name="searchText" type="text" id="searchText" onkeydown="enterSubmit();" class="ipt_style" value="">
            <input type="button" name="sb" id="sb" class="btn_style" value="查询" onclick="return search();">
        </td>
    </tr>
    <tr>
        <td style="padding-top: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 8px;">
            <table width="100%" cellpadding="2" cellspacing="0" class="dataTable" sortstring="" id="dg1" page="true" size="0" method="com.zving.cms.dataservice.Vote.dg1DataBind" multiselect="true" autofill="true" scroll="false" lazy="false" cachesize="0">
                <tbody>
                <tr ztype="head" class="dataTableHead">
                    <td width="5%" align="center">
                        序 号
                    </td>
                    <td width="3%" align="center" ztype="selector" field="id">
                        <input type="checkbox" value="*" id="dg1_AllCheck" onclick="DataGrid.onAllCheckClick('dg1')">
                    </td>
                    <td align="center" width="10%">
                        <b>角色编号</b>
                    </td>
                    <td align="center" width="10%">
                        <b>角色名称</b>
                    </td>
                    <td align="center" width="10%">
                        <b>角色类型</b>
                    </td>
                    <td align="center" width="10%">
                        <b>角色描述</b>
                    </td>
                    <td align="center" width="10%">
                        <b>排序编号</b>
                    </td>
                </tr>

                <tr height="35" id="57414897_tr" ondblclick="edit('57414897');" onclick="DataGrid.onRowClick(this,event);" style="background:#ffffff" th:each="r,role : ${list}">

                    <td align="center" th:text="${role.index+1}">
                        1
                    </td>
                    <td align="center">
                        <input type="checkbox" name="dg1_RowCheck" id="dg1_RowCheck1" value="57414897" onchange="selected(this)">
                    </td>

                    <td align="center" th:text="${r.roleCode}">
                        57414897
                    </td>

                    <td align="center" th:text="${r.roleName}">
                        管理员角色
                    </td>

                    <td align="center" th:if="${r.roleType == 2}">
                        管理角色
                    </td>
                    <td align="center" th:if="${r.roleType == 1}">
                        业务角色
                    </td>

                    <td align="center" th:text="${r.roleDesc}">
                        系统管理员角色
                    </td>

                    <td align="center" th:text="${r.roleOrder}">
                        1
                    </td>
                </tr>

                <tr>
                    <td colspan="7" align="center" id="dg1_PageBar" class="pagebg">
                        <div style="float: right; font-family: Tahoma;" class="flickr">
                            <span class="current">1</span>
                        </div>
                        <div style="float: left; font-family: Tahoma">
                            共 3 条记录，每页 20 条，共 1 页
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">授权页面</h4>
            </div>
            <div class="modal-body">
                <div id="treeview-checkable" class="A"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="confirmCode">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>



<script>

    var roleCode;
    var beforeSelectedTag;
        function showPermissionTree(){
            if (roleCode == null || roleCode == undefined){
                alert("请先选择角色");
                return;
            }
            $.get("user/all-permission?roleCode="+roleCode,function (defaultData) {
                //alert(defaultData)
                var bigData = defaultData;
                var $checkableTree = $('#treeview-checkable').treeview({
                    data: defaultData,
                    showIcon: false,
                    levels: 1,
                    showCheckbox: true,
                    onNodeChecked: function(event, node) {
                        //alert(bigData[0].sizes)

                        $.post("user/add-permission",{roleId:roleCode,moduleCode:node.moduleCode},function (data) {
                            //选中父节点
                            var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                            if (selectNodes) { //子节点不为空，则选中所有子节点
                                $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
                            }
                            var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
                            setParentNodeCheck(node);
                            if (data.code == 0){
                                alert(data.msg);
                            }else {
                                alert(data.msg);
                            }
                        })
                    },
                    onNodeUnchecked: function (event, node) {

                        $.post("user/del-permission",{fid:node.fid,roleId:roleCode,moduleCode:node.moduleCode},function (data) {
                            var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                            if (selectNodes) { //子节点不为空，则取消选中所有子节点
                                $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
                            }

                            if (data.code == 0){
                                alert("取消成功");
                            }else {
                                alert("取消失败");
                            }
                        })

                    }
                });
                $("#myModal").modal("show");
            })

        }




        /*取消父节点时,子节点取消*/
        function getChildNodeIdArr(node) {
            var ts = [];
            if (node.nodes) {
                for (x in node.nodes) {
                    ts.push(node.nodes[x].nodeId);
                    if (node.nodes[x].nodes) {
                        var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                        for (j in getNodeDieDai) {
                            ts.push(getNodeDieDai[j]);
                        }
                    }
                }
            } else {
                ts.push(node.nodeId);
            }
            return ts;
        }
        /*选中父节点时,选择所有子节点*/
        function setParentNodeCheck(node) {
            var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
            if (parentNode.nodes) {
                var checkedCount = 0;
                for (x in parentNode.nodes) {
                    if (parentNode.nodes[x].state.checked) {
                        checkedCount ++;
                    } else {
                        break;
                    }
                }
                if (checkedCount === parentNode.nodes.length) {
                    $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
                    setParentNodeCheck(parentNode);
                }
            }
        }

    /*多选框的状态改变事件*/
    function selected(item) {
        //beforeSelectedTag.checked = false;
        $(beforeSelectedTag).prop("checked",false);
        var checked = item.checked;
       // alert(checked)
        if (checked){
            roleCode = $(item).val();
            beforeSelectedTag = item;
        }

        }

</script>
</body>
</html>